<template>
  <div class="topvideo">

    <div class="video1" >
      <ul class="ulvcd"  >

        <li  v-for="(item,index) in list" >
          <div class="ulvcdimg" :style="{backgroundImage: 'url(' + item.img + ')', backgroundSize:'contain'}">
            <div class="vcd1" >
              <div class="vcd1-tag">文章</div>
              <div class="vcd1-bot">
                <span style="float: left">0000   &nbsp;0.0万</span>
                <span style="float: right">00.00</span>
              </div>
              <div class="vcd1-title">
                {{item.title}}
              </div>
              <div class="vcd1-xuebi">
                <span style="float: left">用户名</span>
                <span style="float: right">000学币</span>
              </div>
            </div>
          </div>

        </li>

      </ul>
    </div>

  </div>
</template>

<script>
import '../mock/index.js'
export default {
  name: 'topvideo',
  data () {
    return {
      msg: 'video',
      list:[]
    }
  },
  created () {
    this.getTop8();
  },
  methods: {
    getTop8 () {
      this.$axios.get('/test/getTop8').then(res => {
        if (res.data) {
          this.list = res.data.list
        }
      })
    },
  }
}
</script>

<style scoped>

  div{
    /*border:1px solid #F00;*/
  }

  .video1{
    margin-top:10px;
    width:90%;
    min-height:226px;
  }

  .ulvcd {
    list-style:none;
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width: auto; /* 宽度根据元素内容调整 */
  }
  .ulvcd li {
    float:left;
    margin:6px;
    margin-left:10px;
  }

  .vcd1{
    padding-top: 10px;
    width: 170px;
    height: 170px;
    text-align: left;
  }

  .ulvcdimg{
    width: 170px;
    height: 116px;
  }

  .vcd1-tag{
    margin-left: 8px;
    padding: 4px;
    background-color: #000000;
    opacity: 0.5;
    font-size:12px;
    color: #FFFFFF;
    text-align: center;
    width: 38px;
    height: 18px;
    border-radius: 20px 20px 20px 20px;
  }
  .vcd1-bot{
    margin-top:50px;
    padding: 4px;
    background-color: #000000;
    opacity: 0.3;
    font-size:12px;
    color: #FFFFFF;
    height: 22px;
    line-height:22px;
  }
  .vcd1-xuebi{
    margin-top: 10px;
  }


</style>
